<template>
  <div class="add-favor-container">
    <div class="flex flex-between">
      <div class="chart-section">
        <div class="main-title">
          <span>在船船员</span>
          <!-- <span>{{ shipCrewNum >= 0 ? shipCrewNum : "--" }}</span> -->

          <a class="more" @click="gotoDetail('/modules/crew/crew/crew-on-board')">查看详情 ></a>
        </div>
        <div id="chart-crew1" class="chart-crew"></div>
      </div>
      <div class="chart-section">
        <div class="main-title">
          <span>船舶证书</span>
          <a class="more" @click="gotoDetail('/modules/certificate/certificate/shipCertificate')">查看详情 ></a>
        </div>
        <div id="chart-certificate1" class="chart-certificate"></div>
      </div>
    </div>
    <!-- <div class="oil-container">
      <div class="main-title">
        <span>油品消耗</span>
      </div>
      <div class="oil-info">
        <div class="oil-info-item">
          <div class="store-info">
            <span class="iconfont icon-oil"></span>
            <span>重油存量</span>
            <span>{{
              shipOilInfo.heavyOilNventory && shipOilInfo.heavyOilNventory >= 0
                ? shipOilInfo.heavyOilNventory
                : "--"
            }}</span>
            <span>吨</span>
          </div>
          <div class="store-info">
            <span class="iconfont icon-oil"></span>
            <span>轻油存量</span>
            <span>{{
              shipOilInfo.lightOilNventory && shipOilInfo.lightOilNventory >= 0
                ? shipOilInfo.lightOilNventory
                : "--"
            }}</span>
            <span>吨</span>
          </div>
        </div>
        <div class="oil-info-item">
          <div>
            <div class="sub-title">油耗信息</div>
            <table class="sub-table" cellspacing="0" cellpadding="0" border="0">
              <tbody>
                <tr>
                  <td>总油耗</td>
                  <td>航次油耗</td>
                </tr>
                <tr>
                  <td>
                    {{
                      shipOilInfo.totalOilConsume > 0
                        ? shipOilInfo.totalOilConsume + '吨'
                        : "--"
                    }}
                  </td>
                  <td>
                    {{
                      shipOilInfo.currentVoyageTotalOilConsume > 0
                        ? shipOilInfo.currentVoyageTotalOilConsume + '吨'
                        : "--"
                    }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div>
            <div class="sub-title">油舱信息</div>
            <table class="sub-table" cellspacing="0" cellpadding="0" border="0">
              <tbody>
                <tr>
                  <td>油舱名称</td>
                  <td>累计加油量</td>
                </tr>
                <tr
                  v-for="(item, index) in shipOilInfo.oilTankInfo"
                  :key="index"
                >
                  <td>{{ item.oilTankName }}</td>
                  <td>{{ item.total }}吨</td>
                </tr>
                <tr v-if="shipOilInfo.oilTankInfo.length == 0">
                  <td colspan="2">暂无油舱信息</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
import * as echarts from "echarts";
import {
  getStatisticOil,
  getStatisticShipCert,
  getStatisticCrew,
} from "@/api/ship";
export default {
  props: {
    shipInfo: {
      type: Object,
    },
  },
  data() {
    return {
      chartCrew: undefined,
      chartCertificate: undefined,

      shipDetail: {},
      shipOilInfo: {
        oilTankInfo: [],
      },
      shipCrewNum: undefined,
    };
  },
  mounted() {
    this.init();
    setTimeout(() => {
      this.updateData();
    }, 200);
  },
  methods: {
    init() {
      this.initCrewChart();
      this.initCertificateChart();
    },
    // echarts
    initCrewChart() {
      const default_data = [
        {
          // name: "app4",
          value: 0,
        },
        {
          // name: "app11",
          value: 0,
        },
        {
          // name: "app8",
          value: 0,
        },
        {
          // name: "app3",
          value: 0,
        },
      ];
      const option = {
        // title: {
        //   text: "应用总数：15",
        //   textStyle: {
        //     color: "#bcbfff",
        //     fontWeight: "bold",
        //     fontSize: 14,
        //   },
        //   top: "4%",
        //   left: "2.2%",
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为："line" | "shadow"
          },
        },
        grid: {
          left: "3%",
          right: "10%",
          top: "0",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: [
          {
            type: "category",
            data: ["在船告警", "在船超期", "证书告警", "证书超期"],
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                color: "#666666",
              },
            },
          },
        ],
        xAxis: [
          {
            type: "value",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],

        series: [
          {
            // name: "应用使用率",
            type: "bar",
            data: default_data,
            barCategoryGap: "35%",
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: function (params) {
                  return params.data.value;
                },
                textStyle: {
                  color: "#666666", // color of value
                },
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#ffb069", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#ec2e85", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };
      this.chartCrew = echarts.init(document.getElementById("chart-crew1"));
      this.chartCrew.setOption(option);
    },
    initCertificateChart() {
      const option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          top: "center",
          left: "0",
          icon: "circle",
        },
        grid: {
          left: "10%",
          right: "0",
          top: "5%",
          bottom: "5%",
          // containLabel: true,
        },
        series: [
          {
            // name: "Access From",
            type: "pie",
            radius: ["50%", "90%"],
            center: ["70%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: true,

              position: "inner",
              formatter: "{c}",

              textStyle: {
                color: "#fff",

                fontSize: 12,
              },
            },
            itemStyle: {
              borderColor: "#ffffff",
              borderWidth: 1,
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: "40",
            //     fontWeight: "bold",
            //   },
            // },
            labelLine: {
              show: false,
            },
            data: [
              { value: 10, name: "正常" },
              { value: 35, name: "检验告警" },
              { value: 58, name: "检验超期" },
              { value: 4, name: "换证告警" },
              { value: 9, name: "换证超期" },
            ],
            color: ["#5B8FF9", "#5AD8A6", "#5D7092", "#F6BD16", "#E8684A"],
          },
        ],
      };

      this.chartCertificate = echarts.init(
        document.getElementById("chart-certificate1")
      );
      this.chartCertificate.setOption(option);
    },
    // 更新数据
    updateData() {
      this.updateShipOilInfo();
      this.updateCrewChartData();
      this.updateCertificateChartData();
    },
    // 更新船员统计图表数据
    updateCrewChartData() {
      // ["在船告警", "在船超期", "证书告警", "证书超期"],
      getStatisticCrew({ shipId: this.shipInfo.shipId }).then((res) => {
        if (res.result) {
          this.shipCrewNum = res.result.crewCount;
          if (this.chartCrew) {
            this.chartCrew.setOption({
              series: {
                data: [
                  { value: res.result.crewWarning },
                  { value: res.result.crewExpired },
                  { value: res.result.certWarning },
                  { value: res.result.certExpired },
                ],
              },
            });
          }
        }
      });
    },

    // 更新证书统计图表数据
    updateCertificateChartData() {
      getStatisticShipCert({ shipId: this.shipInfo.shipId }).then((res) => {
        if (res.result) {
          if (this.chartCertificate) {
            this.chartCertificate.setOption({
              series: {
                data: [
                  { value: res.result.normalCount, name: "正常" },
                  { value: res.result.checkWarningCount, name: "检验告警" },
                  { value: res.result.checkOverdueCount, name: "检验超期" },
                  { value: res.result.certWarningCount, name: "换证告警" },
                  { value: res.result.certOverdueCount, name: "换证超期" },
                ],
              },
            });
          }
        }
      });
    },
    // 更新船舶油耗信息
    updateShipOilInfo() {
      let oilInfo = {
        oilTankInfo: [],
      };
      getStatisticOil({ shipId: this.shipInfo.shipId }).then((res) => {
        if (res.result) {
          oilInfo = res.result;
          if (!oilInfo.oilTankInfo) {
            oilInfo.oilTankInfo = [];
          }
        }
        this.shipOilInfo = oilInfo;
      });
    },
    gotoDetail(url) {
      window.open(url ,'_target')
    }
  },
};
</script>

<style lang="scss" scoped>
.add-favor-container {
  padding: 20px 14px;
  .chart-section {
    width: 240px;
    height: 168px;
    // background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px rgba(0, 74, 170, 0.09);
    border-radius: 3px;
  }
  .main-title {
    font-size: 16px;
    height: 33px;
    font-weight: 600;
    color: #333333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 9px;
    border-bottom: 1px solid #f5f5f5;
    span {
      margin-right: 23px;
    }

    .more {
      color: #004aaa;
    }
  }
  .chart-crew {
    width: 100%;
    height: 140px;
  }
  .chart-certificate {
    width: 100%;
    height: 140px;
  }

  .oil-container {
    margin-top: 20px;
    .main-title {
      border-bottom: none;
    }
  }

  .oil-info {
    &-item {
      margin-top: 9px;
      display: grid;
      grid-template-columns: 50% 50%;

      .store-info {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        span {
          font-size: 14px;
          color: #333333;
          margin-right: 9px;
          &:first-child {
            color: #004aaa;
          }
          &:nth-child(3) {
            width: 50px;
            text-align: right;
          }
        }
      }
      .sub-title {
        font-size: 14px;
        font-weight: 600;
        color: #333333;
      }
      .sub-table {
        border-bottom: 1px solid #d8d8d8;
        color: #666666;
        margin-top: 9px;
        tr {
          &:first-child {
            background: #e9eeff;
            font-weight: 600;
          }
          td {
            width: 91px;
            height: 34px;
            text-align: center;
            border-top: 1px solid #d8d8d8;
            border-left: 1px solid #d8d8d8;
            &:last-child {
              border-right: 1px solid #d8d8d8;
            }
          }
        }
      }
    }
  }
}
</style>
